import React from 'react'
import { Text, View } from '@tarojs/components'
import { getHighlightHtml } from '@UTILS/highlight'
import './UserName.scss'

export default function UserName({
  data = {}, language, highlight = [], userNameClass = ''
}) {
  const { DisplayName, Title } = data
  const name = DisplayName?.[language]
  const title = Title?.[language]
  const hasHighlight = Array.isArray(highlight) && highlight.length
  let highlightHtml = name
  let highlightTitleHtml = title
  if (hasHighlight) {
    highlightHtml = getHighlightHtml(name, highlight)
    highlightTitleHtml = getHighlightHtml(title, highlight)
  }
  return (
    <View className="user-name-container">
      <Text className={`user-name ${userNameClass}`}>{highlightHtml}</Text>
      <Text className="user-title">{highlightTitleHtml}</Text>
    </View>
  )
}
